<template>
  <div class="">
    <div class="breadcrumb flex-center">
      <p class="title">我的课程</p>
    </div>
    <div class="box">
      <div class="flex" style="flex-wrap: wrap;">
        <div class="flex mgb-20 relative item" v-for='(i,index) in tableDate' :key='index' >
          <el-image class="cover" :src="i.img" fit="cover"></el-image>
          <i class="type">{{i.type}}</i>
          <i class="read">{{i.num}}人在看</i>
            <div class="pdl-20 pdr-20 pdt-9 pdb-9 flex1 flex-between flex-column">
              <div>
                <p class="line1 bold mgb-5">{{i.title}}</p>
                <div class="flex" style="flex-wrap: wrap;">
                  <i class="tag mgb-5" v-if="i.tag!=''" :key='tagIndex' v-for='(tag,tagIndex) in i.tag.split(",")'>{{tag}}</i>
                </div>
              </div>
              <div class="flex" style="flex-wrap: wrap;">
                <p class="flex1 color-4E f12">已学{{i.progress}}</p>
              </div>
            </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableDate:[
        {
          img:require('../../assets/img/图层 12@2x.png'),
          title:'开心心上学去(基础版)',
          tag:'基础班,—年级上册,第一单元',
          teacher:'李晓东',
          num:'275',
          type:'道德与法治',
          state:false,
          progress:'60%'
        },
        {
          img:require('../../assets/img/图层 13@2x.png'),
          title:'开心心上学去(基础版)',
          tag:'基础班,—年级上册,第一单元',
          teacher:'李晓东',
          type:'主题教育',
          num:'999',
          state:true,
          progress:'10%'
        },
        {
          img:require('../../assets/img/图层 14@2x.png'),
          title:'开心心上学去(基础版)',
          tag:'基础班,—年级上册,第一单元',
          teacher:'李晓东',
          type:'成长与信仰',
          num:'66',
          state:true,
          progress:'70%'
        }
      ],
    };
  },
  methods: {},
};
</script>

<style lang="less" scoped>
// @import "../../assets/css/variable.less";
.cover{
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
}
.box{
    box-shadow: 1px 2px 33px 5px rgba(204, 204, 204, 0.12);
    border-radius: 7px 7px 7px 7px;
    padding: 20px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    .cover{
      width: 150px;
      height: 100px;
      border-radius: 6px;
      overflow: hidden;
    }
    .type{
      position: absolute;
      height: 20px;
      line-height: 20px;
      border-top-right-radius: 10px;
      border-bottom-right-radius: 10px;
      background-color: #1e1e1e6e;
      color: #fff;
      top: 10%;
      left: 0;
      padding: 0 5px;
      font-size: 12px;
      box-sizing: border-box;
    }
    .read{
      position: absolute;
      width: 150px;
      height: 20px;
      line-height: 20px;
          box-shadow: inset 9px -12px 10px 0px rgba(0,0,0,.3);
      color: #fff;
      top: 80px;
      left: 0;
      padding: 0 5px;
      font-size: 12px;
      box-sizing: border-box;
      text-align: right;
      border-radius: 6px;
    }
    .item{
      width: 50%;
    }

}

</style>